<template>
  <div id="main-content">
    <div class="login-body  animated fadeInLeft">
        <div class="login-main pr">
          <form  class="login-form">
            <h3> 项目生命周期管理系统 </h3>
            <h5 style="padding-bottom: 10px"> Project LifeCycle Management</h5>
                    <!-- 账号登陆 -->
            <div id="MobileBox" class="item-box">
              <div class="input-group"><span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input v-model="username" placeholder="用户名/手机号">
              </div>
              <div class="input-group"><span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input v-model="password" type="password" placeholder="密码" @keyup.enter="login()">
              </div>
              <div>
                <span :class="{'errorCls':isError,'successCls':isSuccess}">{{noticeMsg}}</span>
                <span :class="{'errorCls':isError,'successCls':isSuccess}" style="float: right;">
                  <i class="fa" :class="{'fa-check':isOk,'fa-close':isFail}"></i>
                </span>
              </div>
              <div class="use-qrcode-a">
                <a class="use-ding"><img src="/static/images/ding.png" width="17" height="17" style="margin-top:-2px"> 钉钉账号登陆</a>
              </div>
              <div class="login_btn_panel">
                <el-button type="primary" @click="login">登录</el-button>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</template>

<script>
import {loginAPI, getAPItoken} from '@/utils/api'
export default {
  name: 'App',
  data () {
    return {
      isError: false,
      isSuccess: false,
      isOk: false,
      isFail: false,
      models_name: [],
      noticeMsg: '',
      username: '',
      password: '',
      data: ''
    }
  },
  mounted () {
    const oIframe = document.getElementById('main-content')
    const deviceHeight = document.documentElement.clientHeight
    oIframe.style.height = (deviceHeight) + 'px'
  },
  methods: {
    login () {
      const promise = loginAPI(API.loginAPI, this.username, this.password)
      promise.then((data) => {
        if (data.hasOwnProperty('token')) {
          // 先清除 防止重复加入
          this.$store.commit('clearMenu')
          // 再加入
          this.$store.commit('setMenu', data.menu)
          // 放入token
          this.$store.commit('setToken', data.token)
          // 添加动态路由
          this.$store.commit('addMenu', this.$router)
          // 跳转到首页
          this.$router.push({ name: 'overview' })
        } else {
          this.isError = true;
          this.isFail = true;
          this.noticeMsg = data['detail'];
        }
      })
    }
  }
}
</script>

<style scoped>
#main-content{
  background:url('/static/images/4.jpg');
  background-size: 100% 100%;
  height: 1000px;
  width: 100%;
  background-repeat: no-repeat;
}

.login-body{padding:20px;position:fixed;z-index:2;left:50%;top:50%;margin-top:-300px;margin-left:-200px;border-radius:5px;width:400px;position:absolute;top:50%;left:50%;background-color:rgba(38,43,54,.9);padding:20px;z-index:300}
.login-body .pr{position:relative}
.login-form{width:370px;margin:0 auto;padding:20px 30px 13px 23px}
.login-form .input-group{margin-bottom:15px;border-radius:4px}
.login-form .input-group .input-group-addon{width:43px;border:none;background:#fff}
.login-form .input-group .input-group-addon i{color:rgba(38,43,54,.9);font-size:24px}
.login-form .input-group>input{border:none;border-left:none;padding:10px 20px;color:grey;height:auto}
.login-form h3{font-size:26px;font-weight:500;padding:0;line-height:30px;text-align:center;color:#259dab}
.login-form h5{font-size:20px;font-weight:400;line-height:30px;text-align:center;color:#259dab; border-bottom:1px solid #555; padding-bottom: 10px}
.login-form h5 ul{ margin-top: 8px}
.login-form h5 a{ font-size: 14px; color: #fff}
.login-form .item-box{margin-top:18px}
.login-form .item-box .item{border-radius:5px}
.login-form .item{padding:3px 10px 3px 12px;border:1px solid #ececec;background-color:#fff;margin-bottom:10px}
.login-form .focus{border:1px solid #A6E1F3;box-shadow:0 0 12px #BAF7FF}
.login-form .login_btn_panel{margin:20px 0 10px}
.login-form .login_btn_panel button{border:none;width: 100%;}

.icon-loading{display:inline-block;margin-right:5px;width:16px;height:16px;vertical-align:-3px;}
input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}
img.verifyimg{border-radius:3px;cursor:pointer;position:absolute;right:0;z-index:99;border-radius:0 4px 4px 0}
.input-group .form-control:not(:first-child):not(:last-child){border-radius:0 4px 4px 0}
.login-form .input-group{width:319px}
.login-main input{box-shadow:none;border:none;border-radius:0 4px 4px 0}
.use-qrcode-a{ margin-top: 20px; text-align: right}
.input-group-addon {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  display: table-cell;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}
input{
  outline: none;
  width: 103%;
  display: inline-block;
}

.errorCls{
  color: red;
}
.successCls{
  color: green;
}
</style>
